<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/animate.min.css">
    <link rel="stylesheet" href="/css/swiper-bundle.min.css">
    <link rel="stylesheet/less" href="/css/reset.less">
    <link rel="stylesheet/less" href="/css/common.less">
    
    <link rel="stylesheet/less" href="/css/index.less">
</head>
<body>
    <div class="warp">
        <header>
            <nav class="navbar navbar-inverse">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">spirit8</a>
                    </div>
            
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">HOME</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">SERVICES</a></li>
                            <li><a href="#">portfolio</a></li>
                            <li><a href="#">testimonials</a></li>
                            <li><a href="#">CONTACT</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
        <div class="top">
            <h1>WELCOME ON <span>SPIRIT8</span></h1>
            <small>We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span></small>
            <div class="top-img">
                <img src="./images/arrow.png" alt="">
            </div>
        </div>
        <div class="list">
            <div class="row">
                <div class="col-lg-7 col-sm-6">
                    <img src="./images/about-background.png" alt="">
                </div>
                <div class="col-lg-5 col-sm-6">
                    <small>ABOUT US</small>
                    <div class="list-text">Some words <span>about us</span></div>
                    <div class="list-texttwo">We love building and rebuilding brands through our
                        specific skills. Using colour, fonts, and illustration, we
                        brand companies in a way they will never forget.</div>
                    <div class="nest">
                        <div class="item">
                            <p><span>Mission -</span> We deliver uniqueness and quality</p>
                        </div>
                        <div class="item">
                            <p><span>Skills -</span> Delivering fast and excellent results</p>
                        </div>
                        <div class="item">
                            <p><span>Clients -</span> Satisfied clients thanks to our experience</p>
                        </div>
                    </div>
                    <div class="btn">
                        <img src="./images/about-btn.png" alt="">
                        Browse our work
                    </div>
                </div>
            </div>
        </div>
        <div class="center">
            <p>Meet <span>oup team</span></p>
            <div class="lineone"></div>
            <div class="linetwo"></div>
            <div class="container">
                <div class="swiper team-swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="row">
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="./images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="jason">Jason Statham</div>
                                            <div class="knife">Knife designer</div>
                                            <div class="small">Do not seek to change what has come before. Seek to create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="./images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="jason">Jason Statham</div>
                                            <div class="knife">Knife designer</div>
                                            <div class="small">Do not seek to change what has come before. Seek to create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="./images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="jason">Jason Statham</div>
                                            <div class="knife">Knife designer</div>
                                            <div class="small">Do not seek to change what has come before. Seek to create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="./images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="jason">Jason Statham</div>
                                            <div class="knife">Knife designer</div>
                                            <div class="small">Do not seek to change what has come before. Seek to create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="row">
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="./images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="jason">Jason Statham</div>
                                            <div class="knife">Knife designer</div>
                                            <div class="small">Do not seek to change what has come before. Seek to create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="./images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="jason">Jason Statham</div>
                                            <div class="knife">Knife designer</div>
                                            <div class="small">Do not seek to change what has come before. Seek to create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="./images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="jason">Jason Statham</div>
                                            <div class="knife">Knife designer</div>
                                            <div class="small">Do not seek to change what has come before. Seek to create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="./images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="jason">Jason Statham</div>
                                            <div class="knife">Knife designer</div>
                                            <div class="small">Do not seek to change what has come before. Seek to create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="row">
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="./images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="jason">Jason Statham</div>
                                            <div class="knife">Knife designer</div>
                                            <div class="small">Do not seek to change what has come before. Seek to create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="./images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="jason">Jason Statham</div>
                                            <div class="knife">Knife designer</div>
                                            <div class="small">Do not seek to change what has come before. Seek to create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="./images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="jason">Jason Statham</div>
                                            <div class="knife">Knife designer</div>
                                            <div class="small">Do not seek to change what has come before. Seek to create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="./images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="jason">Jason Statham</div>
                                            <div class="knife">Knife designer</div>
                                            <div class="small">Do not seek to change what has come before. Seek to create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination team-pagination"></div>
                </div>
            </div>
        </div>
        <div class="take">
            <h1>take a look at <span>our work</span></h1>
            <div class="lineone"></div>
            <div class="linetwo"></div>
            <div class="take-text">
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book
                    is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in sec-
                    tion 1.10.32.
            </div>
            <div class="take-content">
                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <div class="take-img">
                            <img src="./images/images/33-spirit8-digital-agency_03.jpg">
                        </div>
                        <div class="right">
                            <div class="desimg">web desimg</div>
                            <div class="first">The first line of Lorem lpsum, "Loremipsum dolor sit amet..", comes from a
                                line in section 1.10.32.
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="take-img">
                            <img src="./images/images/images/images01_03.jpg">
                        </div>
                        <div class="right">
                            <div class="desimg">web desimg</div>
                            <div class="first">The first line of Lorem lpsum, "Loremipsum dolor sit amet..", comes from a
                                line in section 1.10.32.
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="take-img">
                            <img src="./images/images/33-spirit8-digital-agency_03.jpg">
                        </div>
                        <div class="right">
                            <div class="desimg">web desimg</div>
                            <div class="first">The first line of Lorem lpsum, "Loremipsum dolor sit amet..", comes from a
                                line in section 1.10.32.
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="take-img">
                            <img src="./images/images/images/images/images02_03.jpg">
                        </div>
                        <div class="right">
                            <div class="desimg">web desimg</div>
                            <div class="first">The first line of Lorem lpsum, "Loremipsum dolor sit amet..", comes from a
                                line in section 1.10.32.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="some">
            <h1>some of<span>our clients</span></h1>
            <div class="lineone"></div>
            <div class="linetwo"></div>
            <div class="container">
                <div class="swiper team-swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <h1><span>chanel</span>zara guerlain lancome <span>lacoste</span> </h1>
                        </div>
                        <div class="swiper-slide">
                            <h1><span>chanel</span>zara guerlain lancome <span>lacoste</span> </h1>
                        </div>
                        <div class="swiper-slide">
                            <h1><span>chanel</span>zara guerlain lancome <span>lacoste</span> </h1>
                        </div>
                    </div>
                    <div class="swiper-pagination team-pagination"></div>
                </div>
            </div>
        </div>
        <div class="limited">
            <h1>take a look at<span>our work</span></h1>
            <div class="lineone"></div>
            <div class="linetwo"></div>
            <div class="lorem">
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book
                    is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in sec-
                    tion 1.10.32.
            </div>
            <div class="filter">
                <div class="menu">
                    <div class="title">Filter by type</div>
                    <div class="menu-nav">
                        <a href="#">ALL</a>
                        <a href="#">Web desig</a>
                        <a href="#">Mobile design</a>
                        <a href="#">Photograpy</a>
                    </div>
                    <div class="mobile-nav">
                        <select>
                            <option value="">ALL</option>
                            <option value="">Web desig</option>
                            <option value="">Mobile design</option>
                            <option value="">Photograpy</option>
                        </select>
                    </div>
                </div>
                <div class="trend">
                    <div class="item wow slideInLeft" data-wow-delay="100ms">
                        <img src="./images/work-img.png" alt="">
                        <div class="content">
                            <p class="textone">trend and fashion</p>
                            <p class="texttwo">Website design</p>
                            <div class="yuan">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="200ms">
                        <img src="./images/work-img.png" alt="">
                        <div class="content">
                            <p class="textone">trend and fashion</p>
                            <p class="texttwo">Website design</p>
                            <div class="yuan">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="300ms">
                        <img src="./images/work-img.png" alt="">
                        <div class="content">
                            <p class="textone">trend and fashion</p>
                            <p class="texttwo">Website design</p>
                            <div class="yuan">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="400ms">
                        <img src="./images/work-img.png" alt="">
                        <div class="content">
                            <p class="textone">trend and fashion</p>
                            <p class="texttwo">Website design</p>
                            <div class="yuan">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="500ms">
                        <img src="./images/work-img.png" alt="">
                        <div class="content">
                            <p class="textone">trend and fashion</p>
                            <p class="texttwo">Website design</p>
                            <div class="yuan">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="600ms">
                        <img src="./images/work-img.png" alt="">
                        <div class="content">
                            <p class="textone">trend and fashion</p>
                            <p class="texttwo">Website design</p>
                            <div class="yuan">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="700ms">
                        <img src="./images/work-img.png" alt="">
                        <div class="content">
                            <p class="textone">trend and fashion</p>
                            <p class="texttwo">Website design</p>
                            <div class="yuan">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="800ms">
                        <img src="./images/work-img.png" alt="">
                        <div class="content">
                            <p class="textone">trend and fashion</p>
                            <p class="texttwo">Website design</p>
                            <div class="yuan">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="900ms">
                        <img src="./images/work-img.png" alt="">
                        <div class="content">
                            <p class="textone">trend and fashion</p>
                            <p class="texttwo">Website design</p>
                            <div class="yuan">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="1000ms">
                        <img src="./images/work-img.png" alt="">
                        <div class="content">
                            <p class="textone">trend and fashion</p>
                            <p class="texttwo">Website design</p>
                            <div class="yuan">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="1200ms">
                        <img src="./images/work-img.png" alt="">
                        <div class="content">
                            <p class="textone">trend and fashion</p>
                            <p class="texttwo">Website design</p>
                            <div class="yuan">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="1300ms">
                        <img src="./images/work-img.png" alt="">
                        <div class="content">
                            <p class="textone">trend and fashion</p>
                            <p class="texttwo">Website design</p>
                            <div class="yuan">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dean">
            <h1><span>our clients'</span> testimonials</h1>
            <div class="lineone"></div>
            <div class="linetwo"></div>
            <div class="container">
                <div class="swiper team-swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="text">THIS BOOK IS A TREATISE ONTHETHEORY OF ETHICS, VERY POPULAR DURING THE RENAISSANCE.THE FIRSTLINE OF LOREM IPSUM, "LOREM IPSUM DOLOR SIT AMET..",COMES FROM ALINE IN SECTION 1.10.32.</div>
                            <p><span>Dean Martin,</span> CEO Acme lnc.</p>
                        </div>
                        <div class="swiper-slide">
                            <div class="text">THIS BOOK IS A TREATISE ONTHETHEORY OF ETHICS, VERY POPULAR DURING THE RENAISSANCE.THE FIRSTLINE OF LOREM IPSUM, "LOREM IPSUM DOLOR SIT AMET..",COMES FROM ALINE IN SECTION 1.10.32.</div>
                            <p><span>Dean Martin,</span> CEO Acme lnc.</p>
                        </div>
                        <div class="swiper-slide">
                            <div class="text">THIS BOOK IS A TREATISE ONTHETHEORY OF ETHICS, VERY POPULAR DURING THE RENAISSANCE.THE FIRSTLINE OF LOREM IPSUM, "LOREM IPSUM DOLOR SIT AMET..",COMES FROM ALINE IN SECTION 1.10.32.</div>
                            <p><span>Dean Martin,</span> CEO Acme lnc.</p>
                        </div>
                    </div>
                    <div class="swiper-pagination team-pagination"></div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <h1>feel free to<span>contact us</span></h1>
            <div class="lineone"></div>
            <div class="linetwo"></div>
            <div class="take-text">
                Lorem lpsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"(The Extremes
                of Good and Evil) by Cicero, written in 45 BC.This book is a treatise on the theory of ethics, very popular
                during the Renaissance.
            </div>
            <div class="box">
                <form>
                    <div class="form-group item">
                        <label for="name">Name<span>*</span></label>
                        <input type="text" class="form-control" id="name">
                    </div>
                    <div class="form-group item">
                        <label for="exampleInputEmail1">Email address <span>*</span></label>
                        <input type="email" class="form-control" id="exampleInputEmail1">
                    </div>
                    <div class="form-group textarea">
                        <label >Message <span>*</span></label>
                        <textarea name="Message" class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-warning" type="submit">Send</button>
                    </div>
                </form>
            </div>
        </div>
        <footer>
            <div class="foot">
                <div class="foot-text">
                    <p>all rights reserved.copyright @2014 <span>spirit8</span></p>
                </div>
                <div class="foot-img">
                    <img src="./images/images/images/images/images02_03_03.jpg">
                    <img src="./images/images/images/images/images03_03.jpg">
                    <img src="./images/images/images/images/images04_03.jpg">
                    <img src="./images/images/images/images/images06_03.jpg">
                    <img src="./images/images/images/images/images/images07_03_03.jpg">
                </div>
            </div>
        </footer>
    </div>
</body>
</html>
<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/swiper-bundle.min.js"></script>
<script src="/js/less-4.1.3.js"></script>
<script src="/js/wow.min.repeat.js"></script>
<script>
    new WOW().init();

    var MySwiper = new Swiper('.team-swiper',{
        loop: true, 
    
        pagination: {
            el: '.swiper-pagination',
        },
    })
</script>